<template>
    <div id="oute">
        <div id="box">
            <span id="back" @touchstart="first" class="fa fa-angle-left"></span>
            <span id="title">我的波奇</span>
        </div>
        <div id="bigbig">
            <div id="begin">
                <div id="yuan" @touchstart="upload"><img :src="'/avatar/'+list.avatar"></div>
                <span id="user">{{list.username}}</span>
            </div>
            <div class="shop">
                <span id="one">商城订单</span>
                <span id="two">查看全部商城订单></span>
            </div>
            <div class="shoptwo">
                <div class="detail">
                    <span class="fa fa-credit-card-alt"></span>
                    <p>待付款</p>
                </div>
                <div class="detail">
                    <span class="fa fa-mail-forward"></span>
                    <p>待发货</p>
                </div>
                <div class="detail">
                    <span class="fa fa-truck"></span>
                    <p>待收货</p>
                </div>
                <div class="detail">
                    <span class="fa fa-check-square-o"></span>
                    <p>待评价</p>
                </div>
            </div>

            <div class="shop">
                <span id="one">服务订单</span>
                <span id="two">查看全部服务订单></span>
            </div>
            <div class="shoptwo">
                <div class="detail">
                    <span class="fa fa-credit-card-alt"></span>
                    <p>待付款</p>
                </div>
                <div class="detail">
                    <span class="fa fa-check-square-o"></span>
                    <p>待使用</p>
                </div>
                <div class="detail">
                    <span class="fa fa-truck"></span>
                    <p>待评价</p>
                </div>
                <div class="detail">
                    <span class="fa fa fa-vcard"></span>
                    <p>已完成</p>
                </div>
            </div>

            <div id="main">
                <div class="detail">
                    <span class="fa fa-user-o"></span>
                    <p>我的帐号</p>
                </div>
                <div class="detail">
                    <span class="fa fa-credit-card-alt"></span>
                    <p>我的优惠券</p>
                </div>
                <div class="detail">
                    <span class="fa fa-credit-card-alt"></span>
                    <p>兑奖中心</p>
                </div>
                <div class="detail">
                    <span class="fa fa-credit-card-alt"></span>
                    <p>我的收藏</p>
                </div>
                <div class="detail">
                    <span class="fa fa-credit-card-alt"></span>
                    <p>会员卡</p>
                </div>
                <div class="detail">
                    <span class="fa fa-credit-card-alt"></span>
                    <p>我的劵包</p>
                </div>
                <div class="detail">
                    <span class="fa fa-cart-plus"></span>
                    <p>购物车</p>
                </div>
                <div class="detail">
                    <span class="fa fa-credit-card-alt"></span>
                    <p>我的足迹</p>
                </div>
            </div>
            <button @touchstart="exit">退出当前帐号</button>
            <!-- <img src="/static/2.png" id="home" @touchstart="home"> -->
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data: function() {
        return {
            list: []
        }
    },
    methods: {
        exit: function() {
            this.http.get("api/users/exit")
                .then(res => {
                    Toast({
                        message: '退出成功',
                        position: 'middle',
                        duration: 1000
                    });
                    location.hash = "/"
                })
        },
        first: function() {
            location.hash = "/"
        },
        home: function() {
            location.hash = "/"
        },
        upload: function() {
            location.hash = "/third/user/upload"
        }
    },
    activated:function(){
         this.http.post("/api/users/img")
            .then(res => {
                this.list = res.data.data
                // console.log(res.data.data)
            })
    },

    mounted: function() {
        this.http.post("/api/users/img")
            .then(res => {
                this.list = res.data.data
                // console.log(res.data.data)
            })
    },

}
</script>

<style scoped>
#bigbig {
    /* position: relative; */
    height: 93vh;
    overflow-y: scroll;
    margin-top: 7vh;
}

#oute {
    height: 100vh;
    position: relative;
    background-color: #EFEFEF;
}

#box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 7vh;
    font-size: 28px;
    border-bottom: solid 1px gainsboro;
    color: rgb(56, 56, 56);
    position: fixed;
    top: 0;
    background-color: white;
}

#title {
    font-size: 20px;
    margin-right: 35vw;
}

#begin {
    display: flex;
    width: 100%;
    height: 23vh;
    /* border:solid 1px black; */
    background-color: #FF7351;
}

#yuan {
    cursor: pointer;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    /* border:solid 1px black; */
    margin-top: 6vh;
    margin-left: 4vw;
    background-color: white;
}

img {
    width: 65px;
    height: 65px;
    /* border: solid 1px #FF7351; */
    border-radius: 50%;
}

#user {
    margin-top: 9vh;
    margin-left: 6vw;
}

.shop {
    cursor: pointer;
    margin-top: 1.5vh;
    width: 100%;
    height: 7vh;
    border: solid 1px gainsboro;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
}

.shoptwo {
    cursor: pointer;
    display: flex;
    width: 100%;
    height: 12vh;
    border: solid 1px gainsboro;
    text-align: center;
    color: gray;
    background-color: white;
}

p {
    margin: 0;
    margin-top: 2vh;
    font-size: 14px;
}

#one {
    margin-left: 3vw;
    font-size: 15px;
    font-weight: 700;
}

#two {
    margin-right: 3vw;
    font-size: 14px;
}

.detail {
    width: 25%;
    height: 12vh;
    /* border:solid 1px black;  */
}

.detail span {
    margin-top: 2vh;
    font-size: 18px;
}

#main {
    cursor: pointer;
    margin-top: 1.5vh;
    display: flex;
    width: 100%;
    height: 24vh;
    flex-wrap: wrap;
    border: solid 1px gainsboro;
    text-align: center;
    color: gray;
    background-color: white;
}

#main span {
    color: red;
}

button {
    cursor: pointer;
    width: 100%;
    height: 7vh;
    border: solid 1px #FF7351;
    background-color: #FF7351;
    font-size: 14px;
    /* position: fixed;
    bottom: 0;
    left: 0; */
}

#back {
    cursor: pointer;
    font-size: 28px;
    margin-left: 3vw;
}

#home {
    position: fixed;
    bottom: 12vh;
    left: 4vw;
    width: 50px;
    height: 50px;
}
</style>